import styled from "@emotion/styled"
import Svg from "@/components/base/Svg"
const BetCard = styled.div`
    background: #ffffff;
    border-radius: 10rem;
    padding: 12rem;
    width: 100%;
`

const UserInfo = styled.div`
    display: flex;
    align-items: start;
    gap: 12rem;
    margin-bottom: 12rem;
`

const Avatar = styled.div`
    width: 40rem;
    height: 40rem;
    border-radius: 50%;
    background: #f2f3f5;
`

const UserDetail = styled.div`
    flex: 1;
`

const UserName = styled.div`
    font-size: 16rem;
    font-weight: 700;
    color: #1d2129;
    margin-bottom: 4rem;
`

const UserId = styled.div`
    font-size: 12rem;
    color: #86909c;
`

const HistoryButton = styled.div`
    display: flex;
    align-items: center;
    gap: 5rem;
    color: #165dff;
    font-size: 12rem;
    font-weight: 500;
    cursor: pointer;

    img {
        width: 14rem;
        height: 14rem;
    }
`

const BetInfo = styled.div`
    display: flex;
    justify-content: space-around;
    margin-bottom: 12rem;
    background-color: #f7f8fa;
    border-radius: 8rem;
    position: relative;
    height: 60rem;
    padding: 8rem;
    &::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 8rem;
        width: 1px;
        background-color: #e5e6eb;
        height: calc(100% - 16rem);
    }
`

const InfoColumn = styled.div`
    .label {
        font-size: 12rem;
        color: #86909c;
        margin-bottom: 4rem;
        height: 16rem;
        line-height: 16rem;
        text-align: center;
    }

    .value {
        font-size: 16rem;
        font-weight: 700;
        color: #1d2129;
        height: 24rem;
        line-height: 24rem;
        text-align: center;
    }
`

const BetTarget = styled.div`
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 4rem;
    color: #86909c;
    font-size: 12rem;

    .highlight {
        color: #ff4757;
        font-weight: 500;
        padding-left: 6rem;
    }

    .bet-amount {
        font-weight: 700;
        color: #1d2129;
    }
`

export const BetButton = styled.button`
    width: 56rem;
    height: 24rem;
    background: #e8f3ff;
    border-radius: 4rem;
    color: #165dff;
    font-size: 12rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8rem;
    padding: 0 6rem 0 12rem;
    img {
        width: 6rem;
        height: 12rem;
    }
`

const BetTargetContainer = styled.div`
    display: flex;
    align-items: center;
    justify-content: space-between;
`

interface BetInfoCardProps {
    userName?: string
    userId?: string
    position?: string
    currentBet?: string
    targetBet?: string
    targetPosition?: string
    onHistoryClick?: () => void
    onBetClick?: () => void
}

export default function BetInfoCard({
    userName = "Filbet987",
    userId = "Filbet_5678",
    position = "100 th+",
    currentBet = "0.00",
    targetBet = "123,500.00",
    targetPosition = "Top 100",
    onHistoryClick,
    onBetClick,
}: BetInfoCardProps) {
    return (
        <BetCard>
            <UserInfo>
                <Avatar />
                <UserDetail>
                    <UserName>{userName}</UserName>
                    <UserId>ID: {userId}</UserId>
                </UserDetail>
                <HistoryButton onClick={onHistoryClick}>
                    <Svg src="pages/Walfare/svg/history.svg" />
                    <span>History</span>
                </HistoryButton>
            </UserInfo>

            <BetInfo>
                <InfoColumn>
                    <div className="label">My Position</div>
                    <div className="value">{position}</div>
                </InfoColumn>
                <InfoColumn>
                    <div className="label">Bet</div>
                    <div className="value">₱{currentBet}</div>
                </InfoColumn>
            </BetInfo>
            <BetTargetContainer>
                <BetTarget>
                    <span>Bet</span>
                    <span className="bet-amount">₱ {targetBet}</span>
                    <span>To reach</span>
                    <span className="highlight">{targetPosition}</span>
                </BetTarget>

                <BetButton onClick={onBetClick}>
                    Bet
                    <Svg src="pages/Walfare/svg/arrow_right.svg" />
                </BetButton>
            </BetTargetContainer>
        </BetCard>
    )
}
